<template>
  <el-menu
    default-active="/index/gg"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
     @select="handleSelect"
  >
      <el-menu-item index="/index/gg">
      <el-icon><el-icon-setting /></el-icon>
      <span>成绩 </span>
    </el-menu-item>
    <el-menu-item index="/index/kc">
    <el-icon><Platform /></el-icon>
      <span>课程</span>
    </el-menu-item>
    <el-menu-item v-for=" item in menu" :key="item.path" :index="`/index/${item.path}`" >
         <el-icon>
          <!-- <component :is="item.meta.menuIcon"></component> -->
        </el-icon>
        <span>{{item.name}}</span>
    </el-menu-item>
  </el-menu>
  
  <!-- <button v-auth="`sterch`">点击</button> -->


</template>

<script setup>
import { Menu as ElIconMenu, Document as ElIconDocument, Setting as ElIconSetting ,Platform} from '@element-plus/icons-vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import menRoutes from '../router/Ym.js'
import {useCounterStore} from '../stores/user'
let  route = useRouter()
let UserData= useCounterStore()
 console.log(UserData.userdata)

 const userRole=computed(()=>{
    return UserData.userdata.rolename
 })
 const menu=computed(()=>{
     return menRoutes.filter(item=>{
      if(userRole.value.includes(item.meta.roleName)){
        return item
      }
    })
 })
 console.log(userRole.value,'2');
 const handleSelect = (key,) => {
  console.log(key)
  route.push(key)
}
</script>
<style scoped>
.el-menu-vertical {
  width: 200px;
  height: 100vh;
}
</style>